﻿<!DOCTYPE html>
<html>
<head>
    <title>模板编辑</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!--bootStrop css 单选框样式-->
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/icheck-bootstrap.css">
    <!--bootStrop css 主样式-->
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/bootstrap.min.css">
    <!--jquery js-->
    <script src="resources/scripts/assets/js/jquery-2.2.3.min.js"></script>
    <!--bootStrop js-->
    <script src="resources/scripts/assets/bootstrap/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $("#moban").load("通用模板选择.html");
            $("#kongjian").load("公共控件树.html");
            $("#guize").load("规则设定.html");
            $("#zidingyikongjian").load("自定义控件属性.html");
            $("#zuheshuxing").load("组合属性.html");
            //获取页面的每个按钮
            let btns = $(".btn_active");
            //获取内容盒子
            let contents = $(".content");
            //遍历每个按钮为其添加点击事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i;
                btns[i].onclick = function () {
                    //对当前点击的按钮赋予active类名及显示当前按钮对应的内容
                    for (var j = 0; j < btns.length; j++) {
                        btns[j].className = btns[j].className.replace(' active', '').trim();
                        contents[j].className = contents[j].className.replace(' show', '').trim();
                    }
                    this.className = this.className + ' active';
                    contents[this.index].className = contents[this.index].className + ' show';
                };
            }
        });
    </script>
    <style>
        .content {
            margin: 10px auto;
            display: none;
        }

        .content.show {
            display: block;

        }
    </style>
</head>
<body class="edit">
<div class="pull-left col-md-offset-0"
     style="position:absolute;left:40px;top:-30px;width:100px;height:20px;font-size:12px;text-decoration:underline;color:#0000CC;">
    <br/><br/><br/>
    <span style="color: #FF6600" class="glyphicon glyphicon-log-in"></span>
    <a href="模板列表.html">
        <ins>返回模板列表</ins>
    </a>
    <div style="position:absolute;left:561px;top:22px;width:157px;height:20px;font-size:12px;">
        <h3><strong>模板设计</strong></h3>
    </div>
</div>
<h6 class="page-header"></h6>
<div class="col-lg-3 pull-left">
    &emsp;&nbsp;&nbsp;<input type="button" class="btn btn-warning" value="引用模板" data-toggle="modal"
                             data-target="#myModal2">
    &emsp;&emsp;<strong style="color: #2aabd2">基本信息&emsp;体格检查</strong>
    <br/><br/>
</div>
<div class="pull-left">
    <input type="button" class="btn_active btn btn-info" value="控件树设计">
    <input type="button" class="btn_active btn btn-info" value="组合属性">
    <input type="button" class="btn_active btn btn-info" value="自定义控件属性">
</div>
<div class="col-lg-4 pull-right">
    <input type="button" class="btn btn-info" value="规则设定" data-toggle="modal" data-target="#myModal1">
    <input type="button" class="btn btn-info" data-target="#downloadModal" rel="/build/downloadModal"
           role="button" data-toggle="modal" value=" 保存">
    <input type="button" class="btn btn-info" value="发布">
    <input type="button" id="edit" class="btn btn-info active" value="编辑">
    <input type="button" class="btn btn-info" id="sourcepreview" value="预览">
    <input type="button" class="btn btn-info" value="取消">
</div>
<!--编辑框-->
<div style="min-height: 210px;margin-top: auto;top:80px" class="demo ui-sortable"></div>
<!--下载内容显示-->
<div id="download-layout">
    <div class="container-fluid"></div>
</div>
<div class="content show">
    <div id="kongjian"></div>
</div>
<div class="content">
    <div style="margin-top: -405px;margin-left: 20px;" id="zuheshuxing"></div>
</div>
<div class="content">
    <div style="margin-top: -405px;margin-left: 20px;" id="zidingyikongjian"></div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1" style="color: #2aabd2">规则设定</h4>
            </div>
            <div class="modal-body">
                <div id="guize" class="col-lg-offset-1"></div>
            </div>
            <div class="modal-footer">
                <input type="button" class="btn btn-info text-center" value="保存">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel" style="color: #2aabd2">通用模板选择</h4>
            </div>
            <div class="modal-body">
                <div id="moban"></div>
                <br/><br/><br/><br/><br/><br/><br/>
            </div>
            <div class="modal-footer">
                <input type="button" class="btn btn-info text-center" value="确定/合并">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--富文本编辑-->
<div id="editorModal" class="modal fade bs-example-modal-sm" role="dialog" style="display: none;">
    <div class="modal-dialog" role="document" style="width: 56%;">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>编辑</h3>
            </div>
            <div class="modal-body">
                <p>
                    <textarea id="contenteditor"></textarea>
                </p>
            </div>
            <div class="modal-footer">
                <a id="savecontent" class="btn btn-primary" data-dismiss="modal">保存</a>
                <a class="btn" data-dismiss="modal">关闭</a>
            </div>
        </div>
    </div>
</div>
<!--结束-->
<!--保存按钮-->
<div id="downloadModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog" role="document" style="width: 56%;">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>保存</h3>
                <div class="modal-body">
                    <p>已在下面生成干净的HTML, 可以下载代码到你的项目.</p>
                    <div class="btn-group">
                        <button type="button" id="fluidPage" class="active btn btn-info"><i
                                class="icon-fullscreen icon-white"></i>
                            自适应宽度
                        </button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-info" id="fixedPage"><i
                                class="icon-screenshot icon-white"></i>
                            固定宽度
                        </button>
                    </div>
                    <br>
                    <br>
                    <p>
                        <textarea></textarea>
                    </p>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-info" onclick="saveHtml()">下载</a>
                    <a class="btn btn-default" data-dismiss="modal">关闭</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
